<template>
	<wd-popup v-model="dialogVisible" custom-style="width:80%; height:40%" lock-scroll :close-on-click-modal="false">
		<wd-form ref="formRef" :model="formData" :rules="formRules">
			<wd-cell-group border>
				<wd-card type="rectangle">
					<template #title>
						<view class="" style="display: flex;">
							<span style="display: flex;align-items: center;margin-left: 10px;">转派任务</span>
						</view>
					</template>
					<view class="">
						<wd-select-picker label="新审批人" label-width="80px" prop="assigneeUserId"
							v-model="formData.assigneeUserId" :columns="userList" placeholder="请选择审批人" clearable
							filterable value-key="id" label-key="nickname" :show-confirm="false"
							type="radio"></wd-select-picker>
						<wd-input label="转派理由" label-width="80px" prop="reason" clearable v-model="formData.reason"
							placeholder="请输入转派理由" />
					</view>
					<template #footer>
						<view class="flex justify-evenly mx-4 my-2">
							<wd-button type="success" @click="submitForm" custom-class="w-8" block>提交</wd-button>
							<wd-button type="error" @click="dialogVisible = false" custom-class="custom-shadow"
								block>取消</wd-button>
						</view>
					</template>
				</wd-card>
			</wd-cell-group>
			<view class="footer" >
			</view>
		</wd-form>
	</wd-popup>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import * as TaskApi from '@/api/bpm/task'
	import * as UserApi from '@/api/system/user'

	defineOptions({ name: 'TaskTransferForm' })

	const dialogVisible = ref(false) // 弹窗的是否展示
	const formLoading = ref(false) // 表单的加载中
	const formData = ref({
		id: '',
		assigneeUserId: undefined,
		reason: ''
	})
	const formRules = ref({
		assigneeUserId: [{

			required: true,
			message: '新审批人不能为空',
			trigger: 'change',
			validator: (value : any) => {
				if (value && Array.isArray(value) && value.length > 0) {
					console.log('value.length', value.length);
					return Promise.resolve();
				} else {
					return Promise.reject('审批人不能为空');
				}
			},

		}],
		reason: [{ required: true, message: '转派理由不能为空', trigger: 'blur' }]
	})





	const formRef = ref() // 表单 Ref
	const userList = ref<any[]>([]) // 用户列表
	const userOptions = ref<any[]>([]) // 用户列表

	/** 打开弹窗 */
	const open = async (id : string) => {
		dialogVisible.value = true
		resetForm()
		formData.value.id = id
		// 获得用户列表
		// 获得用户列表
		userList.value = await UserApi.getSimpleUserList()
		console.log('userList.value', userList.value);
	}
	defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗

	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const submitForm = async () => {
		// 校验表单
		if (!formRef.value) return
		const { valid, errors } = await formRef.value.validate()
		if (!valid) {
			console.log('表单校验未通过:', errors);
			return; // ✅ 校验失败，终止后续代码
		}
		// 提交请求
		formLoading.value = true
		try {
			console.log('formData.value', formData.value);
			await TaskApi.transferTask(formData.value)
			dialogVisible.value = false
			// 发送操作成功的事件
			emit('success')
		} finally {
			formLoading.value = false
		}
	}

	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			id: '',
			assigneeUserId: undefined,
			reason: ''
		}
	}
</script>